<template>
  <div class="app-container">
    <div>
      <h1 class="title">{{ title }}</h1>

      <div class="item" v-for="(item, index) in newData" :key="index">
        <h1>{{ item.label }}</h1>
        <ul v-if="item.english.toLowerCase() === 'background'">
          <!--如果是undefined则传入一个对象 -->
          <!-- <Reader :obj="item.background || {}"></Reader> -->
          <!-- 问答背景 -->
          <h3>{{ background }}</h3>
        </ul>
        <!-- 详细渲染 -->
        <ul v-if="item.english.toLowerCase() === 'answer'">
          <li
            :class="{
              test: t.id.split((transformNum = t)),
              haveOpinin: t.comment,
            }"
            :data-index="t.id"
            v-for="(t, i) in contentList"
            :key="i"
          >
            <template v-if="t.type == '1'">
              <h5 style="margin: 15px" class="text">
                <Reader :obj="t"></Reader>
              </h5>
            </template>
            <template v-if="t.type == '2'">
              <p>
                <el-image
                  style="width: 500px"
                  :src="t.url"
                  :preview-src-list="[t.url]"
                >
                </el-image>
              </p>
            </template>
            <template v-if="t.type == '3'">
              <a :href="i.url">{{ t.content }}</a>
            </template>

            <div
              class="reason"
              v-for="(o, index) in OpinionFnlist"
              :key="index"
            >
              <template v-if="o && t.id === o.endItemId">
                <div>
                  <div class="DefailReason">
                    <h2>失败原因</h2>
                    <span class="updateTime">更新时间{{ o.updatedTime }}</span>
                  </div>
                  <div class="DefailText">{{ o.opinion }}</div>
                </div>
              </template>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// 头条的详细
import { getQaInfoApi } from "@/wss/api/doc/qa.js";

// 模块分类
import {
  getDocModuleListApi,
  getDocModuleByTypeApi,
} from "@/wss/api/contentTemplate";
import Reader from "../../../../components/reader.vue";

export default {
  components: { Reader },
  props: {},

  data() {
    return {
      background: "",
      haveOpininArr: [],
      // 内容列表
      contentList: [],
      // 意见列表
      OpinionFnlist: [],
      // 模板类型
      newData: [],
      title: "",
    };
  },
  methods: {
    // 获取详细信息
    async getTopInfoFn() {
      let { data, code } = await getQaInfoApi({ id: this.$route.query.id });
      if (code === 200) {
        console.log(data, "data1111111111");
        this.title = data.title;
        this.contentList = data.answer;
        this.background = data.background;
        // console.log(data, "contentlist");
      }
    },
    //  内容模版  list
    async getDocModuleListApiMet() {
      let result = await getDocModuleListApi();
      if (result.code == 200) {
        result.rows.forEach((item) => {
          item.type == "问答"
            ? (this.docModuleType = {
                type: item.type,
                no: item.no,
              })
            : "";
        });
      }
      this.getDocModuleByTypeApiMet(this.docModuleType);
    },
    // 去重复
    TorepeatFn(data) {
      this.haveOpininArr = [...new Set(data)];
      console.log(this.haveOpininArr, "haveOpininArr");
    },
    //  内容模版  按类型查找
    async getDocModuleByTypeApiMet(type) {
      let { code, data } = await getDocModuleByTypeApi(type);
      if (code == 200) {
        // // 拼接内容模板的内容
        this.newData = data.map((item) => {
          return {
            label: item.module + "/" + item.english,
            english: item.english,
          };
        });
      }
      console.log("newData", this.newData);
    },
  },
  async mounted() {
    await this.getTopInfoFn();

    this.getDocModuleListApiMet();

    // 获取意见列表
    this.getOpinionFnlist(this, this.contentList);
    console.log(this.$route.query.id, "idstr");
    // // 查询esId
    // let { data } = await searchReviewByIdApi({ id: this.$route.query.id });
    // let result = await getVerifyDocInfoDocIdApi({ id: data.idStr });
    // let opinion = await getDetailApi({
    //   docId: result.data.docIdStr,
    //   verifyId: result.data.idStr,
    // });
    // console.log(opinion, "opinion");
  },
};
</script>

<style lang="scss"  scoped >
.title {
  text-align: center;
  font-family: "MicrosoftYaHei", "Microsoft YaHei";
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: #e37709;
}
li {
  list-style: none;
}
.text {
  display: inline-block;

  margin: unset;
  font-family: "PingFangSC-Regular", "PingFang SC";
  line-height: 20px;
  font-size: 14px;
}

.breadcrumbBox {
  height: 50px;
  background-color: #f5f5f5;
}
.tableBox {
  display: flex;
  height: 200px;
  justify-content: space-evenly;
  .title {
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f2f2f2;
  }
  .item {
    text-align: center;
    width: 200px;
    border: 1px #cccc solid;
    height: 100%;
  }
  .item:nth-child(2),
  .item:nth-child(3) {
    flex: 10;
  }
  .content {
    font-size: 13px;
    font-weight: 900;
    color: #9999;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.background {
  margin-top: 20px;
  margin-bottom: -4px;
  .background-content {
    padding-top: 30px;
    height: 100px;
  }
  .FailureReason {
    .title {
      display: flex;
      align-items: center;
      span {
        margin-left: 20px;
        font-size: 11px;
      }
    }
    background-color: #f5f5f5;
    padding: 10px;
    .content {
      font-size: 13px;
    }
    .footer {
      margin-top: 10px;
    }
  }
}
ul {
  padding: 0px;
}
.lineItem {
  list-style: none;
  margin: 20px 0px;
  font-size: 12px;
  position: relative;
}
.selectItem {
  cursor: pointer;
  position: absolute;
  left: 0px;
  display: inline-block;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: black;
  height: 50px;
  width: 100px;
  text-align: center;
  line-height: 50px;
}
.div {
  margin: 10px 0px;
}

.el-row {
  margin-bottom: 20px;
  height: 100px;
  background-color: white;
}
.echoText {
  margin-top: 30px;
  background: #cccc;
  padding: 30px;
}
.submitPinion {
  font-weight: 400;
  font-size: 13px;
  height: 80px;
  color: white;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
  background-color: black;
  position: absolute;
  width: 200px;
  z-index: 1000;
  line-height: 80px;
}

.DefailText {
  min-height: 50px;
}
</style>